<template>
  <div class="order_wrap">
    <!-- 面包屑 -->
    <div class="order_top">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 订单列表 -->
    <div class="order_table">
      <el-table
        :data="orderObj.orderList"
        border
        style="width: 100%"
        max-height="500"
      >
        <el-table-column type="index" width="50" align="center" />
        <el-table-column
          prop="order_number"
          label="订单编号"
          align="center"
          width="300"
        />
        <el-table-column prop="order_price" label="订单价格" align="center" />
        <el-table-column prop="order_pay" label="是否付款" align="center">
          <template #default="scope">
            <el-button type="primary" v-if="scope.row.order_pay === '0'"
              >未付款</el-button
            >
            <el-button type="success" v-else>已付款</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" align="center">
        </el-table-column>
        <el-table-column prop="create_time" label="创建日期" align="center">
          <template #default="scope">
            {{ dayFn(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="showEditOrder(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 编辑订单回显 -->
    <el-dialog v-model="orderObj.editOrderDialog" title="编辑订单" width="40%">
      <el-form
        ref="ruleForm"
        :model="orderObj.editOrderForm"
        status-icon
        :rules="orderObj.editOrderRules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="是否发货" prop="is_send">
          <el-select
            v-model="orderObj.editOrderForm.is_send"
            placeholder="Select"
          >
            <el-option label="未发货" value="0"> </el-option>
            <el-option label="已发货" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单支付" prop="order_pay">
          <el-select
            v-model="orderObj.editOrderForm.order_pay"
            placeholder="Select"
          >
            <el-option label="未支付" value="0"> </el-option>
            <el-option label="支付宝" value="1"> </el-option>
            <el-option label="微信" value="2"> </el-option>
            <el-option label="银行卡" value="3"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单价格" prop="order_price">
          <el-input v-model="orderObj.editOrderForm.order_price"></el-input>
        </el-form-item>
        <el-form-item label="订单数量" prop="order_number">
          <el-input v-model="orderObj.editOrderForm.order_number"></el-input>
        </el-form-item>
        <el-form-item label="订单支付" prop="pay_status">
          <el-select
            v-model="orderObj.editOrderForm.pay_status"
            placeholder="Select"
          >
            <el-option label="未付款" value="0"> </el-option>
            <el-option label="已付款" value="1"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="orderObj.editOrderDialog = false">取消</el-button>
          <el-button type="primary" @click="updataOrderFn">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- pagination分页 -->
    <div class="order_page">
      <el-pagination
        v-model:currentPage="orderObj.orderParams.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="orderObj.orderParams.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderObj.orderTotal"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.order_wrap {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  .order_top {
    margin-bottom: 15px;
  }
  .order_page {
    margin-top: 15px;
  }
}
</style>
<script>
import { ref, reactive, onMounted } from "vue";
import { getOrders, updataOrder } from "../../http/api";
import * as dayjs from "dayjs";
import * as isLeapYear from "dayjs/plugin/isLeapYear"; // import plugin
import "dayjs/locale/zh-cn"; // import locale
export default {
  setup() {
    const orderObj = reactive({
      orderList: [],
      orderTotal: 0,
      orderParams: {
        pagenum: 1,
        pagesize: 10,
        query: "",
      },
      editOrderDialog: false,
      editOrderForm: {
        is_send: "",
        order_pay: "",
        order_price: "",
        order_number: "",
        pay_status: "",
        id: "",
      },
      editOrderRules: {
        order_price: [
          {
            required: true,
            message: "请输入订单价格",
            trigger: "blur",
          },
        ],
        order_number: [
          {
            required: true,
            message: "请输入订单数量",
            trigger: "blur",
          },
        ],
      },
    });

    const getOrdersFn = async () => {
      const result = await getOrders(orderObj.orderParams);
      orderObj.orderList = result.goods;
      orderObj.orderTotal = result.total;
    };
    // 初始化订单信息
    onMounted(() => {
      getOrdersFn();
    });
    //页码改变事件
    const handleCurrentChange = (value) => {
      orderObj.orderParams.pagenum = value;
      getOrdersFn();
    };
    // 每页数量改变事件
    const handleSizeChange = (value) => {
      orderObj.orderParams.pagesize = value;
      getOrdersFn();
    };
    // 时间格式转换
    const dayFn = (value) => {
      return dayjs(Number(value)).format("YYYY-MM-DD HH:mm:ss");
    };
    // 编辑订单回显
    const showEditOrder = (scopeRow) => {
      let {
        is_send,
        order_pay,
        order_price,
        order_number,
        pay_status,
        order_id,
      } = scopeRow;
      if(is_send == '是'){
          is_send = '1'
     }else{
         is_send = '0'
     }
      orderObj.editOrderForm = {
        is_send,
        order_pay,
        order_price,
        order_number,
        pay_status,
        id: order_id,
      };
      orderObj.editOrderDialog = true;
    };
    // 确定提交修改订单
    const updataOrderFn= async ()=>{
       await updataOrder(orderObj.editOrderForm)
       getOrdersFn();
       orderObj.editOrderDialog = false;
    }
    return {
      orderObj,
      dayFn,
      handleCurrentChange,
      handleSizeChange,
      showEditOrder,
      updataOrderFn
    };
  },
};
</script>